<template>
    <div class="prodetail">
        <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed title="详情" left-arrow
            @click-left="$router.go(-1)" />
        <van-swipe @change="onChange" :autoplay="3000">
            <van-swipe-item v-for="(image, index) in sponsInfo.bannerUrls" :key="index">
                <img :src="image" />
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">{{ current + 1 }} / {{ sponsInfo.bannerUrls.length }}</div>
            </template>
        </van-swipe>
        <div>
            <div class="info">
                <div class="compInfo">
                    <div class="compImg">
                        <van-image height="100%" fit="cover" round :src="sponsInfo.avatar" />
                    </div>
                    <div class="compName">
                        <p class="Names">{{ sponsInfo.name }}</p>
                        <div class="labels">
                            <span class="oneLabel" v-for="item in sponsInfo.tags" :key="item.id">{{ item }}</span>
                        </div>
                    </div>
                </div>
                <div class="brie">
                    <p>{{ sponsInfo.description }}</p>
                </div>
                <div class="organTabLab">
                    <div class="orgLab">
                        <p>举办活动</p>
                        <p style="font-weight: 600;">{{ sponsInfo.orderTotal }}</p>
                    </div>
                    <div class="orgLab">
                        <p>报名人次</p>
                        <p style="font-weight: 600;">{{ sponsInfo.personNum }}</p>
                    </div>
                </div>
                <div class="goods-list">
                    <van-list v-model="loadings" :finished="finished" finished-text="没有更多了" @load="onLoad">
                        <goods-item :types="1" :goods="item" v-for="item in ticketList" :key="item.id"></goods-item>
                    </van-list>
                </div>
            </div>
        </div>
        <div :class="{ 'showpanel': showPanel }" style="display: block; height: 51px;position: relative;z-index: 9999;">
            <van-goods-action>
                <van-goods-action-icon icon="share-o" text="分享" @click="toShareWx" />
                <!-- <van-goods-action-icon icon="cart-o" text="发现" @click="$router.push('/cart')" /> -->
                <!-- <van-goods-action-icon icon="shop-o" text="店铺" badge="12" @click="$toast('店铺页面..')" /> -->
                <!-- <van-goods-action-button type="warning" text="加入购物车" @click="showSKUPanel(true)" /> -->
                <van-goods-action-button type="danger" icon="bag" color="linear-gradient(to right, #ff425e, #fd796d)"
                    text="立即购买" @click="showSKUPanel" />
            </van-goods-action>
        </div>
    </div>
</template>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
import defaultImg from '@/assets/default-avatar.png'
import GoodsItem from '@/components/GoodsItem.vue'
import { mapGetters } from 'vuex'

export default {
    name: 'ProductDetailPage',
    components: { GoodsItem },
    async created() {
        this.getDetail(this.sponsId)
        this.getTicketList(this.sponsId)
    },
    data() {
        return {
            showPanel: false, // 展示加购面板
            goods: {
            },
            defaultImg, // 用户默认头像
            comment_data: '', // 商品评价列表数据
            sponsInfo: '', // 商品详情数据
            current: 0,
            comment_count: 0, // 商品评价总数
            voteNum: 0,
            stepNum: 1,
            ticketList: [],
            choseTicket: {}
        }
    },
    methods: {
        getDetail(id) {
            this.$axios.get(`front/sponsor/info/${id}`).then((res) => {
                this.sponsInfo = res.result
            });
        },
        getTicketList(id) {
            this.$axios.get(`front/sponsor/activityListBySponsorId/${id}`).then((res) => {
                this.ticketList = res.result.data
            });
        },
        toBuy() {
            this.$router.push({
                path: '/pay',
                query: {
                }
            })
        },
        onChange(index) {
            this.current = index
        },
        showSKUPanel() {
            this.$axios.get(`front/activity/ticket/${this.sponsId}`).then((res) => {
                this.ticketList = res.result
                if (this.ticketList.length > 0) {
                    this.choseTicket = this.ticketList[0]
                }
                this.showPanel = true
            });
        },
        toShareWx(){
          
        }
    },
    computed: {
        sponsId() {
            return this.$route.query.id
        },
        allPrice() {
            return this.stepNum * this.choseTicket.price
        },
        ...mapGetters('user', ['isLogin']),
        ...mapGetters('cart', ['cartLength'])
    }
}
</script>
  
<style lang="less" scoped>
.goods-list {
    background-color: transparent;
    color: #fff;
}

.htmlss {
    padding: 0 .2rem;
}

/deep/ .van-stepper__minus,
/deep/ .van-stepper__plus {
    background: #2b2c48;
    color: #fff;
}

/deep/ .van-stepper__input {
    background: #23233b;
    color: #fff;
}

.actVote {
    border: 2px solid #fff;
    background: #fc5b9f !important;
}

.choseMenu {
    color: #fff;
    margin-top: 1rem;
    position: relative;

    .choseTitle {
        font-size: .32rem;
        position: absolute;
        top: -.7rem;
        left: .3rem;
    }
}

.van-popup--bottom {
    z-index: 9999 !important
}

.van-goods-action {
    padding: 2px 5px 2px 2px;
}

/* 显示面板的时候将fix的固定高度去掉 */
.showpanel {
    //display: none !important;
    height: 0 !important;
}

.custom-indicator {
    position: absolute;
    right: .1rem;
    bottom: .4rem;
    padding: .06rem .1rem;
    font-size: .26rem;
    color: white;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
}

.prodetail {
    ::v-deep .van-icon-arrow-left {
        color: #333;
    }

    img {
        display: block;
        width: 100%;
    }

    .desc {
        width: 100%;
        top: 3rem;
        height: 8rem;
        // min-height: 40vh;
        overflow-y: auto;
        position: relative;
        z-index: 99;
        background: #fff;

        ::v-deep img {
            display: block;
            width: 100% !important;
        }
    }

    .info {
        position: relative;
        top: -.2rem;
        padding: .2rem;
        background: #fff;
        z-index: 99;
        border-radius: .2rem .2rem 0 0;
        min-height: 49vh;

        .compInfo {
            height: 1rem;
            display: flex;
            width: 100%;
            margin-bottom: .2rem;
        }

        .compName {
            width: 55%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .Names {
                color: #000;
                height: 40%;
                font-weight: 600;
                font-size: 0.3rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .labels {
                overflow: auto hidden;
                min-width: 48vw;
                color: #9a9a9c;
                font-size: 0.25rem;
                height: 50%;
                display: flex;
                align-items: center;

                .oneLabel {
                    display: block;
                    background: #f2f1f5;
                    border-radius: 0.1rem;
                    padding: 0.02rem 0.2rem;
                    font-size: 0.26rem;
                    line-height: 0.45rem;
                    height: 0.5rem;
                    margin-right: 0.2rem;
                }
            }
        }

        .compImg {
            height: 100%;
            padding-right: .4rem;
        }

        .brie {
            width: 100%;
            font-size: .26rem;
            margin-bottom: .3rem;
            color: #a4a4a4;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //行数
            -webkit-box-orient: vertical;
        }

        .organTabLab {
            display: flex;
            justify-content: space-between;

            .orgLab {
                font-size: .28rem;
                width: 45%;
                line-height: .45rem;
                border-radius: .4rem;
                padding: .08rem .2rem;
                display: flex;
                justify-content: space-between;
                background: #fcf3ee;
                color: #ee5a6f;
            }
        }
    }

    .title {
        display: flex;
        justify-content: space-between;

        .now {
            color: #fa2209;
            font-size: 20px;
        }

        .oldprice {
            color: #959595;
            font-size: 16px;
            text-decoration: line-through;
            margin-left: 5px;
        }

        .sellcount {
            color: #959595;
            font-size: 16px;
            position: relative;
            top: 4px;
        }
    }

    .msg {
        font-size: 16px;
        line-height: 24px;
        margin-top: 5px;
    }

    .service {
        display: flex;
        justify-content: space-between;
        line-height: 40px;
        margin-top: .2rem;
        font-size: 16px;
        background-color: #fafafa;

        .left-words {
            span {
                margin-right: .2rem;
            }

            .van-icon {
                margin-right: 4px;
                color: #fa2209;
            }
        }
    }

    .comment {
        text-align: start;
        padding: .2rem;
    }

    .comment-title {
        display: flex;
        justify-content: space-between;

        .right {
            color: #959595;
        }
    }

    .comment-item {
        font-size: 16px;
        line-height: .6rem;

        .top {
            height: .6rem;
            display: flex;
            align-items: center;
            margin-top: 20px;

            img {
                width: 20px;
                height: 20px;
            }

            .name {
                margin: 0 .2rem;
            }
        }

        .time {
            color: #999;
        }
    }

}

.tips {
    padding: .2rem;
}
</style>
  